<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url(./clock.png);
            width: 512px;
            height: 512px;
        }
        .clock img {
            position: absolute;
        }
        .hour {
            left: 239px;
            top: 239px;
            transform-origin: center 17px;
        }
        .minute {
            left: 239px;
            top: 240px;
            transform-origin: center 16px;
        }
        .second {
            left: 247px;
            top: 180px;
            transform-origin: center 77px;
        }
    </style>
</head>

<body>
    <div class="clock">
        <img src="./hour.png" alt="" class="hour">
        <img src="./minute.png" alt="" class="minute">
        <img src="./second.png" alt="" class="second">
    </div>
    <script>
        function $(selector) {
            return document.querySelector(selector)
        }

        function play() {
            const time = new Date()
            const hour = (time.getHours() + time.getMinutes() / 60) % 12 / 12 * 360 - 180
            const minute = (time.getMinutes() + time.getSeconds() / 60) / 60 * 360 - 180
            const second = time.getSeconds() / 60 * 360 - 180

            $('.hour').style.transform = `rotate(${hour}deg)`
            $('.minute').style.transform = `rotate(${minute}deg)`
            $('.second').style.transform = `rotate(${second}deg)`
        }

        setInterval(play, 1000);
    </script>
</body>

</html>